<script setup lang="ts">
import {ref, onMounted, nextTick, watch, reactive} from 'vue'
import Curve from "../Tool/curve.vue";

const scrollbarRef = ref()
const value = ref('')
const items = ref(Array.from({length: 100}, (_, i) => i))

const serial = reactive({
    port: 'COM1',
    baudRate: 115200,
    dataBits: 8,
    stopBits: 1,
    parity: 'none',
})
const portList = ref(['COM1', "COM2"])
const baudRates = ref([300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 38400, 57600,
    115200, 230400, 460800, 921600])
const dataBits = ref([8, 7, 6, 5])
const stopBits = ref([1, 1.5, 2])
const parityBits = ref(['none', 'odd', 'even'])
const scrollToBottom = () => {
    nextTick(() => {
        const scrollbar = scrollbarRef.value?.wrapRef
        if (scrollbar) {
            scrollbar.scrollTop = scrollbar.scrollHeight
        }
    })
}

onMounted(() => {
    scrollToBottom()
})

watch(items, scrollToBottom, {deep: true})

watch(serial, (newValue: object) => {
    console.log(newValue)
})

</script>

<template>
    <el-card style="height: 60%" body-style="height: calc(100% - 10px)">
        <curve />
    </el-card>
    <el-card style="height: 10%; margin-top: 5px;">
        <el-row>
            <el-col :span="22" style="display: flex; justify-content: flex-start;">
                <div class="serial-config">
                    <span style="margin-right: 5px">串口号</span>
                    <el-select
                        v-model="serial.port"
                        placeholder="串口号"
                        size="default"
                        style="width: 100px"
                    >
                        <el-option
                            v-for="item in portList"
                            :key="item"
                            :label="item"
                            :value="item"
                        />
                    </el-select>
                </div>
                <div class="serial-config">
                    <span style="margin-right: 5px">波特率</span>
                    <el-select
                        v-model="serial.baudRate"
                        placeholder="波特率"
                        size="default"
                        style="width: 100px"
                    >
                        <el-option
                            v-for="item in baudRates"
                            :key="item"
                            :label="item"
                            :value="item"
                        />
                    </el-select>
                </div>
                <div class="serial-config">
                    <span style="margin-right: 5px">数据位</span>
                    <el-select
                        v-model="serial.dataBits"
                        placeholder="dataBits"
                        size="default"
                        style="width: 100px"
                    >
                        <el-option
                            v-for="item in dataBits"
                            :key="item"
                            :label="item"
                            :value="item"
                        />
                    </el-select>
                </div>
                <div class="serial-config">
                    <span style="margin-right: 5px">校验位</span>
                    <el-select
                        v-model="serial.parity"
                        placeholder="校验位"
                        size="default"
                        style="width: 100px"
                    >
                        <el-option
                            v-for="item in parityBits"
                            :key="item"
                            :label="item"
                            :value="item"
                        />
                    </el-select>
                </div>
                <div class="serial-config config-last">
                    <span style="margin-right: 5px">停止位</span>
                    <el-select
                        v-model="serial.stopBits"
                        placeholder="停止位"
                        size="default"
                        style="width: 100px"
                    >
                        <el-option
                            v-for="item in stopBits"
                            :key="item"
                            :label="item"
                            :value="item"
                        />
                    </el-select>
                </div>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" size="default" style="width: 100%">
                    打开
                </el-button>
            </el-col>
        </el-row>
    </el-card>
    <el-card style="height: calc(30% - 20px); margin-top: 5px;" body-style="height: calc(100% - 40px)">
        <el-row :gutter="5" style="width: 100%; height: 100%">
            <el-col :span="22" style="width: 100%; height: 100%; max-width: 100%; max-height: 100%">
                <textarea
                    class="input__inner"
                    v-model="value"
                />
            </el-col>
            <el-col :span="2" style="height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center">
                <el-button type="primary" size="default" style="width: 80%; margin-left: 22px;">
                    发送
                </el-button>
                <el-button type="primary" size="default" style="width: 80%; margin-left: 22px;">
                    清空
                </el-button>
            </el-col>
        </el-row>
    </el-card>
</template>
<style scoped lang="css">
.serial-config {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.config-last {
    margin-right: 0;
}

.input__inner {
    height: 100%;
    width: 100%;
    resize: none;
    overflow-y: auto;
    font-family: inherit;
    font-size: var(--el-font-size-base);
    padding: 5px 12px;
    color: var(--el-text-color-regular);
    background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    outline: none;
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
    transition: var(--el-transition-box-shadow);
    border: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.input__inner:hover {
    box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
}

.input__inner:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}

textarea:focus-visible {
    outline-offset: 0;
}
</style>